// 主色调
:root {
  // 主要颜色
  --primary-color: #409EFF;
  --primary-light: #66b1ff;
  --primary-dark: #337ecc;
  
  // 成功色
  --success-color: #67C23A;
  --success-light: #85ce61;
  --success-dark: #529b2e;
  
  // 警告色
  --warning-color: #E6A23C;
  --warning-light: #ebb563;
  --warning-dark: #b87333;
  
  // 危险色
  --danger-color: #F56C6C;
  --danger-light: #f78989;
  --danger-dark: #c45656;
  
  // 信息色
  --info-color: #909399;
  --info-light: #a6a9ad;
  --info-dark: #73767a;
  
  // 文本颜色
  --text-color-primary: #303133;
  --text-color-regular: #606266;
  --text-color-secondary: #909399;
  --text-color-placeholder: #C0C4CC;
  
  // 边框颜色
  --border-color-base: #DCDFE6;
  --border-color-light: #E4E7ED;
  --border-color-lighter: #EBEEF5;
  --border-color-extra-light: #F2F6FC;
  
  // 背景颜色
  --background-color-base: #F5F7FA;
  --background-color-page: #FFFFFF;
  --background-color-overlay: rgba(255, 255, 255, 0.9);
  
  // 侧边栏颜色
  --sidebar-bg-color: #304156;
  --sidebar-text-color: #bfcbd9;
  --sidebar-active-text-color: #409EFF;
  --sidebar-border-color: #434a50;
  
  // 间距
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  --spacing-xxxl: 32px;
  
  // 圆角
  --border-radius-sm: 2px;
  --border-radius-base: 4px;
  --border-radius-lg: 6px;
  --border-radius-xl: 8px;
  
  // 阴影
  --box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  --box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  --box-shadow-dark: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  
  // 字体大小
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-xxl: 20px;
  
  // 字体粗细
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  
  // 行高
  --line-height-base: 1.5;
  --line-height-sm: 1.2;
  --line-height-lg: 1.8;
  
  // 表格颜色
  --table-header-bg: #F5F7FA;
  --table-row-hover-bg: #F5F7FA;
  --table-current-row-bg: #d3e3fd;
  --table-border-color: #EBEEF5;
  
  // 状态颜色
  --status-online: #43b984;
  --status-offline: #DC143C;
  --status-warning: #E6A23C;
  
  // 设备相关颜色
  --device-online-color: #43b984;
  --device-offline-color: #474747;
  --device-algo-color: #43b984;
  
  // 页面布局
  --header-height: 60px;
  --sidebar-width: 240px;
  --page-padding: var(--spacing-xl);
  
  // 过渡动画
  --transition-base: all 0.3s;
  --transition-fast: all 0.2s;
  --transition-slow: all 0.5s;
}

// SCSS 变量（兼容性）
$primary-color: var(--primary-color);
$success-color: var(--success-color);
$warning-color: var(--warning-color);
$danger-color: var(--danger-color);
$info-color: var(--info-color);

$text-color-primary: var(--text-color-primary);
$text-color-regular: var(--text-color-regular);
$text-color-secondary: var(--text-color-secondary);

$border-color-base: var(--border-color-base);
$background-color-base: var(--background-color-base);

$spacing-sm: var(--spacing-sm);
$spacing-md: var(--spacing-md);
$spacing-lg: var(--spacing-lg);
$spacing-xl: var(--spacing-xl);

$border-radius-base: var(--border-radius-base);
$box-shadow-base: var(--box-shadow-base);

$font-size-base: var(--font-size-base);
$font-weight-normal: var(--font-weight-normal);
$line-height-base: var(--line-height-base);
